<template>
	<div class="tables-edit-outer">
		<div v-if="!isEditting" class="tables-edit-con">
			<span class="value-con">{{ value }}</span>
			<Button v-if="editable" @click="startEdit" style="padding: 0px 4px;" icon="md-create" size="small" type="text"></Button>
		</div>
		<div v-else class="tables-editting-con">
			<Input :value="value" @input="handleInput" class="tables-edit-input" />
			<Button @click="saveEdit" style="padding: 0px 4px;" size="small" icon="md-checkmark" type="text"></Button>
			<Button @click="canceltEdit" style="padding: 0px 4px;" size="small" icon="md-close" type="text"></Button>
		</div>
	</div>
</template>

<script>
export default {
	name: 'TablesEdit',
	props: {
		value: [String, Number],
		edittingCellId: String,
		params: Object,
		editable: Boolean
	},
	computed: {
		isEditting() {
			return this.edittingCellId === `editting-${this.params.index}-${this.params.column.key}`;
		}
	},
	methods: {
		handleInput(val) {
			this.$emit('input', val);
		},
		startEdit() {
			this.$emit('on-start-edit', this.params);
		},
		saveEdit() {
			this.$emit('on-save-edit', this.params);
		},
		canceltEdit() {
			this.$emit('on-cancel-edit', this.params);
		}
	}
};
</script>

<style lang="less">
.tables-edit-outer {
	height: 100%;
	.tables-edit-con {
		position: relative;
		height: 100%;
		.value-con {
			vertical-align: middle;
		}
		.tables-edit-btn {
			position: absolute;
			right: 10px;
			top: 0;
			display: none;
		}
		&:hover {
			.tables-edit-btn {
				display: inline-block;
			}
		}
	}
	.tables-editting-con {
		.tables-edit-input {
			width: ~'calc(100% - 60px)';
		}
	}
}
</style>
